<template>
    <div class="infinite-list-wrapper">
        <div
            class="card-container"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
        >
            <el-card
                v-for="occupation in processOccupations"
                :key="occupation.occupationId"
                class="list-item"
                @click.native="handleClick(occupation)"
            >
                <div slot="header" class="clearfix">
                    <span>
                        <i class="el-icon-caret-right"></i>
                        {{ occupation.truncatedOccupationName }}
                    </span>
                    <span class="right-align">
                        <i class="el-icon-money"></i>
                        {{ occupation.occupationSalary }}
                    </span>
                </div>
                <div>
                    <span>
                        <i class="el-icon-reading"></i>
                        {{ occupation.occupationDegreeLabel }}
                    </span>
                    <span style="margin-left: 1vw">
                        <i class="el-icon-suitcase-1"></i>
                        {{ occupation.truncatedOccupationExperience }}
                    </span>
                </div>
                <div class="clearfix">
                    <span>
                        <i class="el-icon-office-building"></i>
                        {{ occupation.truncatedEnterpriseName }}
                    </span>
                    <span class="right-align">
                        <i class="el-icon-location-information"></i>
                        {{ occupation.cityName }}
                    </span>
                </div>
            </el-card>
        </div>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
    </div>
</template>

<script>
import { Message } from 'element-ui'
let degree = require('@/assets/degree-code.json')
export default {
    data() {
        return {
            count: 10,
            occupationCount: '',
            loading: false,
            formData: {
                input: null,
                city: '0',
                province: '0',
                salary: '0',
                degree: '0',
                experience: '0',
                category: '0',
                nature: '0',
                scale: '0'
            },
            occupations: [
                {
                    occupationId: '',
                    occupationName: '',
                    occupationCategory: '',
                    occupationCity: '',
                    cityName: '',
                    occupationLocation: '',
                    occupationProfile: '',
                    occupationDegree: '',
                    occupationExperience: '',
                    occupationSalary: '',
                    occupationEnterprise: '',
                    enterpriseName: '',
                    enterpriseNature: '',
                    enterpriseScale: ''
                }
            ]
        }
    },
    computed: {
        noMore() {
            return this.count >= this.occupationCount
        },
        disabled() {
            return this.loading || this.noMore
        },
        processOccupations() {
            return this.occupations.map((occupation) => {
                let experienceText
                const experience = Number(occupation.occupationExperience)

                if (experience === 0) {
                    experienceText = '不限'
                } else if (experience === -1) {
                    experienceText = '应届生'
                } else {
                    experienceText = experience + '年经验'
                }

                const degreeItem = degree.find(
                    (item) => item.value === occupation.occupationDegree
                )
                const degreeText = degreeItem ? degreeItem.label : ''

                return {
                    ...occupation,
                    truncatedOccupationName:
                        occupation.occupationName?.length > 15
                            ? occupation.occupationName.substring(0, 15) + '...'
                            : occupation.occupationName,
                    truncatedEnterpriseName:
                        occupation.enterpriseName?.length > 15
                            ? occupation.enterpriseName.substring(0, 15) + '...'
                            : occupation.enterpriseName,
                    truncatedOccupationExperience: experienceText,
                    occupationDegreeLabel: degreeText
                }
            })
        },
        listenSeekerSearchData() {
            return this.$store.state.seekerSearchData
        }
    },
    mounted() {
        this.$axios.post('/occupation/allOccupations').then((resp) => {
            this.occupations = resp.data
        })
        this.$axios.post('/occupation/occupationCount').then((resp) => {
            this.occupationCount = resp.data
        })
    },
    methods: {
        load() {
            this.loading = true
            setTimeout(() => {
                this.count += 7
                this.loading = false
            }, 1000)
        },
        handleClick(occupation) {
            this.$store.commit(
                'setSeekerSearchOccupationId',
                occupation.occupationId
            )
            Message({
                message: `Card ${occupation.occupationId} clicked!`,
                type: 'success'
            })
        },
        showOccupations() {
            this.$axios
                .post(
                    '/occupation/occupationSearch',
                    this.$store.state.seekerSearchData
                )
                .then((response) => {
                    this.$message('Data submitted successfully!')
                    this.occupations = response.data
                })
                .catch((error) => {
                    this.$message.error('Failed to submit data.')
                    console.log(error)
                })
        }
    },
    watch: {
        listenSeekerSearchData: {
            handler() {
                this.showOccupations()
            },
            deep: true
        }
    },
    created() {}
}
</script>

<style>
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.list-item {
    width: 100%;
}

.el-card {
    min-width: 380px;
    margin-right: 20px;
    transition: all 0.5s;
}
.el-card:hover {
    margin-top: -5px;
    background-color: #f1f1f1;
}

.clearfix {
    display: flex;
    justify-content: space-between;
}

.right-align {
    text-align: right;
}
</style>
